<template>
  <view
    :class="['divider-style-wrapper', gradualChange.gradualChange]"
    :style="{
      '--backgroundColor': backgroundColor,
      '--fontSizeColor': titleColor
    }"
  >
    <template v-if="gradualChange.gradualChange === 'dividerStyle1'">
      <view class="left-wrapper">
        <view class="square1"></view>
        <view class="square2"></view>
      </view>
      <view class="label-wrapper">
        <span class="label">{{ titleValue }}</span>
        <view class="label-line"></view>
      </view>
      <view class="sep-line"></view>
    </template>

    <template v-if="gradualChange.gradualChange === 'dividerStyle2'">
      <view class="label-wrapper">
        <span class="label">{{ titleValue }}</span>
      </view>
      <view class="right-wrapper">
        <view class="right-triangle"></view>
      </view>
      <view class="top-line"></view>
      <view class="bottom-line"></view>
    </template>

    <template v-if="gradualChange.gradualChange === 'dividerStyle3'">
      <view class="label-wrapper">
        <view class="left-square"></view>
        <span class="label">{{ titleValue }}</span>
        <view class="right-square"></view>
      </view>
      <view class="top-line"></view>
      <view class="bottom-line"></view>
    </template>

    <template v-if="gradualChange.gradualChange === 'dividerStyle4'">
      <view class="left-wrapper"></view>
      <view class="label-wrapper">
        <view class="left-triangle"></view>
        <span class="label">{{ titleValue }}</span>
        <view class="right-triangle"></view>
      </view>
      <view class="right-wrapper"></view>
    </template>

    <template v-if="gradualChange.gradualChange === 'dividerStyle5'">
      <view class="label-wrapper">
        <view class="left-square small"></view>
        <view class="left-square"></view>
        <span class="label">{{ titleValue }}</span>
        <view class="right-square"></view>
        <view class="right-square small"></view>
      </view>
      <view class="bottom-line1"></view>
      <view class="bottom-line2"></view>
    </template>

    <template v-if="gradualChange.gradualChange === 'dividerStyle6'">
      <view class="left-wrapper flex-start">
        <view class="left-triangle"></view>
        <view class="rec"></view>
        <view class="right-triangle"></view>
      </view>
      <view class="label-wrapper">{{ titleValue }}</view>
      <view class="left-wrapper">
        <view class="left-triangle"></view>
        <view class="rec"></view>
        <view class="right-triangle"></view>
      </view>
    </template>

    <template v-if="gradualChange.gradualChange === 'dividerStyle7'">
      <view class="left-wrapper">
        <view class="top-border"></view>
        <view class="bottom-border"></view>
      </view>
      <view class="label-wrapper">
        <view class="left-triangle"></view>
        <view class="label">{{ titleValue }}</view>
        <view class="right-triangle"></view>
      </view>
      <view class="left-wrapper">
        <view class="top-border"></view>
        <view class="bottom-border"></view>
      </view>
    </template>

    <template v-if="gradualChange.gradualChange === 'dividerStyle8'">
      <view class="left-wrapper">
        <view class="top-border"></view>
        <view class="bottom-border"></view>
      </view>
      <view class="label-wrapper">
        <view class="line-wrapper">
          <view class="line line1"></view>
          <view class="line line2"></view>
          <view class="line line3"></view>
          <view class="line line4"></view>
          <view class="line line5"></view>
          <view class="line line6"></view>
        </view>
        <view class="label">{{ titleValue }}</view>
        <view class="line-wrapper">
          <view class="line line1 line-y"></view>
          <view class="line line2 line-y"></view>
          <view class="line line3 line-y"></view>
          <view class="line line4 line-y"></view>
          <view class="line line5 line-y"></view>
          <view class="line line6 line-y"></view>
        </view>
      </view>
      <view class="left-wrapper">
        <view class="top-border"></view>
        <view class="bottom-border"></view>
      </view>
    </template>
  </view>
</template>

<script>
  import mpConfig from '@/uni_modules/vk-uview-ui/libs/mixin/mp-vertual-node';

  export default {
    name: 'styleDivider',
    options: mpConfig,
    props: {
      config: {
        type: Object,
        default: () => {}
      },
      title: {
        type: String,
        default: '分割线'
      },
      hideLabel: {
        type: Boolean,
        default: false
      },
      height: {
        type: String,
        default: '35px'
      },
      backgroundColor: {
        type: String,
        default: 'rgba(235,241,255,1)'
      },
      gradualChange: {
        type: Object,
        default: () => {}
      },
      titleColor: {
        type: String,
        default: 'rgba(56,117,255,1)'
      },
      opacitySection: {
        type: Array,
        default: () => [0.1, 0]
      }
    },
    data() {
      return {};
    },
    computed: {
      titleValue() {
        return this.hideLabel ? '' : this.title;
      }
    }
  };
</script>

<style scoped lang="scss">
  $fontSizeColor: var(--fontSizeColor);
  $backgroundColor: var(--backgroundColor);
  .divider-style-wrapper {
    position: relative;
    display: flex;
    width: 100%;
    height: 28px;
    .top-line {
      position: absolute;
      left: 0;
      top: -0.5px;
      width: 100%;
      height: 0;
      border: 1px solid $backgroundColor;
      transform: scale(1, 0.5);
    }
    .bottom-line {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 0;
      border: 1px solid $backgroundColor;
    }
    &.dividerStyle1 {
      .left-wrapper {
        width: 23px;
        position: relative;
        height: 26px;
        .square1 {
          position: absolute;
          left: 0;
          top: 0;
          background: $backgroundColor;
          border-radius: 1px;
          width: 17px;
          height: 17px;
        }
        .square2 {
          position: absolute;
          right: 1px;
          bottom: 3px;
          background: $backgroundColor;
          border: 1px solid #fff;
          border-radius: 1px;
          width: 13px;
          height: 13px;
          box-sizing: border-box;
        }
      }
      .label-wrapper {
        position: relative;
        padding-left: 8px;
        font-size: 14px;
        color: $fontSizeColor;
        flex: 1;
        height: 24px;
        font-weight: 600;
        .label {
          max-width: 100%;
          text-overflow: ellipsis;
          white-space: nowrap;
          display: inline-block;
          overflow: hidden;
        }
        .label-line {
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 0;
          border: 1px solid $backgroundColor;
        }
      }
      .sep-line {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 0;
        border: 1px solid $backgroundColor;
        transform: scale(1, 0.5);
      }
    }
    &.dividerStyle2 {
      .label-wrapper {
        height: 100%;
        line-height: 28px;
        max-width: 80%;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        padding: 0 10px;
        font-size: 14px;
        color: $fontSizeColor;
        font-weight: 600;
        background-color: $backgroundColor;
        flex: none;
      }
      .right-wrapper {
        flex: auto;
        .right-triangle {
          height: 100%;
          transform: skew(26deg) translateX(-50%);
          width: 15px;
          background-color: $backgroundColor;
        }
      }
    }
    &.dividerStyle3 {
      justify-content: flex-start;
      .label-wrapper {
        height: 100%;
        line-height: 28px;
        padding: 0 1px;
        text-align: center;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        max-width: 100%;
        min-width: 5%;
        span {
          max-width: 90%;
          min-width: 20%;
          margin: 0 10px;
          overflow: hidden;
          display: inline-block;
          font-weight: 600;
          font-size: 14px;
          color: $fontSizeColor;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .left-square {
          background: $backgroundColor;
          height: 10px;
          transform: rotate(45deg);
          width: 10px;
        }
        .right-square {
          background: $backgroundColor;
          height: 10px;
          transform: rotate(45deg);
          width: 10px;
        }
      }
    }

    &.dividerStyle4 {
      .left-wrapper {
        width: 14px;
        height: 100%;
        background-color: $backgroundColor;
      }
      .right-wrapper {
        flex: auto;
        height: 100%;
        background-color: $backgroundColor;
      }
      .label-wrapper {
        display: flex;
        max-width: 80%;
        .left-triangle {
          width: 0;
          height: 0;
          border-top: 28px solid $backgroundColor;
          border-right: 18px solid transparent;
        }
        .right-triangle {
          width: 0;
          height: 0;
          border-bottom: 28px solid $backgroundColor;
          border-left: 18px solid transparent;
        }
        .label {
          height: 100%;
          line-height: 28px;
          font-weight: 600;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 14px;
          white-space: nowrap;
          color: $fontSizeColor;
        }
      }
    }

    &.dividerStyle5 {
      justify-content: center;
      position: relative;
      .label-wrapper {
        height: 85%;
        line-height: 28px;
        padding: 0 1px;
        text-align: center;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        span {
          max-width: 80%;
          min-width: 20%;
          margin: 0 10px;
          overflow: hidden;
          display: inline-block;
          font-weight: 600;
          font-size: 14px;
          color: $fontSizeColor;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .left-square {
          background: $backgroundColor;
          height: 10px;
          transform: rotate(45deg);
          width: 10px;
          &.small {
            width: 8px;
            height: 8px;
            margin-right: 10px;
          }
        }
        .right-square {
          background: $backgroundColor;
          height: 10px;
          transform: rotate(45deg);
          width: 10px;
          &.small {
            width: 8px;
            height: 8px;
            margin-left: 10px;
          }
        }
      }
      .bottom-line1 {
        position: absolute;
        left: 0;
        bottom: 3px;
        width: 100%;
        height: 0;
        border: 1px solid $backgroundColor;
      }
      .bottom-line2 {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 0;
        border: 1px solid $backgroundColor;
        transform: scale(1, 0.5);
      }
    }

    &.dividerStyle6 {
      justify-content: center;
      .left-wrapper {
        display: inline-flex;
        justify-content: flex-end;
        flex-grow: 1;
        height: 100%;
        &.flex-start {
          justify-content: flex-start;
        }
        .left-triangle {
          width: 0;
          height: 0;
          border-bottom: 28px solid $backgroundColor;
          border-left: 18px solid transparent;
        }
        .rec {
          background-color: $backgroundColor;
          width: 92%;
          height: 100%;
        }
        .right-triangle {
          width: 0;
          height: 0;
          border-top: 28px solid $backgroundColor;
          border-right: 18px solid transparent;
        }
      }
      .label-wrapper {
        max-width: 23%;
        height: 100%;
        line-height: 28px;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 14px;
        white-space: nowrap;
        color: $fontSizeColor;
        margin: 0 8px 0 5px;
        font-weight: 600;
      }
    }

    &.dividerStyle7 {
      .left-wrapper {
        flex-grow: 1;
        height: 100%;
        position: relative;
        .top-border {
          position: absolute;
          top: 10px;
          left: 0;
          width: 100%;
          height: 1px;
          background-color: $backgroundColor;
        }
        .bottom-border {
          position: absolute;
          bottom: 10px;
          left: 0;
          width: 100%;
          height: 1px;
          background-color: $backgroundColor;
          transform: scale(1, 0.5);
        }
      }
      .label-wrapper {
        height: 100%;
        display: inline-flex;
        margin: 0 10px;
        .left-triangle {
          width: 0;
          height: 0;
          border-top: 15px solid transparent;
          border-right: 16px solid $backgroundColor;
          border-bottom: 13px solid transparent;
        }
        .right-triangle {
          width: 0;
          height: 0;
          border-top: 15px solid transparent;
          border-left: 16px solid $backgroundColor;
          border-bottom: 13px solid transparent;
        }
        .label {
          background-color: $backgroundColor;
          max-width: 90%;
          height: 100%;
          line-height: 28px;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 14px;
          font-weight: 600;
          white-space: nowrap;
          color: $fontSizeColor;
          padding: 0 5px;
        }
      }
    }

    &.dividerStyle8 {
      .left-wrapper {
        flex-grow: 1;
        height: 100%;
        position: relative;
        .top-border {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 1px;
          background-color: $backgroundColor;
          transform: scale(1, 0.5);
        }
        .bottom-border {
          position: absolute;
          bottom: -0.5px;
          left: 0;
          width: 100%;
          height: 1px;
          background-color: $backgroundColor;
        }
      }

      .label-wrapper {
        height: 100%;
        display: inline-flex;
        margin: 0 6px 0 19px;
        .line-wrapper {
          width: 48px;
          position: relative;
          .line {
            position: absolute;
            top: 0;

            width: 1px;
            height: 100%;
            background-color: $backgroundColor;
            transform: skew(26deg);
          }
          .line-y {
            transform: skew(-26deg);
          }
          .line1 {
            left: 0;
          }
          .line2 {
            left: 7px;
          }
          .line3 {
            left: 14px;
          }
          .line4 {
            left: 21px;
          }
          .line5 {
            left: 28px;
          }
          .line6 {
            left: 35px;
          }
        }
        .label {
          max-width: 72%;
          height: 100%;
          line-height: 28px;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 14px;
          margin: 0 20px 0 9px;
          font-weight: 600;
          white-space: nowrap;
          color: $fontSizeColor;
        }
      }
    }
  }
</style>
